<template>
  <div id="xlinkAutoModal">
    <!-- 搜索组件  2018/9/3 zhangQ -->
    <Select ref="selectAuto" v-model="selectValue"
      :style="{width:width+'px'}"
      :multiple="multiple"
      @on-clear="clearAction"
      :loading="searchLoading"
      clearable>
      <Input ref="searchInput" v-model="query" placeholder="搜索..."></Input>

      <i-col span="24" style="overflow: auto;height: 175px">
        <template v-for="(item, index) in optionData">
          <Option :value="item[field]" :key="index" :label="item[field]" :class="getClass(item[field])"></Option>
        </template>
      </i-col>

    </Select>
    <!--<Select-->
    <!--v-model="selectValue"-->
    <!--filterable-->
    <!--:loading="searchLoading">-->
    <!--<template v-for="item in optionData">-->
    <!--<Option :value="item[field]" :key="item[field]">{{ item[label] }}</Option>-->
    <!--</template>-->
    <!--<Option v-for="(item, index) in optionData" :value="item[field]" :key="index">{{item[label]}}</Option>-->
    <!--</Select>-->
  </div>
</template>

<script>
  import _ from 'lodash'

  export default {
    name: 'index',
    data () {
      let query = ''
      let value = ''
      let dataClone = []
      let optionData = []
      let searchLoading = false
      let dropVisible = false
      let datas = { dataClone, optionData, searchLoading, value, query, dropVisible }
      return datas
    },
    props: {
      // 是否多选
      multiple: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      // 宽度
      width: {
        type: Number,
        default: 200
      },
      // 查询数组
      dataList: {
        type: Array,
        default () {
          return []
        }
      },
      // 值字段
      field: {
        type: String,
        default: ''
      },
      // 显示字段
      label: {
        type: String,
        default: ''
      },
      // 搜索的键值
      searchKeys: {
        type: String,
        default: ''
      },
      // 是否展开
      dropAll: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      selectValue: {
        get () {
          return this.value
        },
        set (val) {
          this.value = val
          this.$emit('on-change', val)
          this.$emit('input', val)
        }
      }
    },
    watch: {
      dataList (val, oldval) {
        this.mountedAction()
      }
    },
    methods: {
      getClass (val) {
        if (this.multiple) {
          if (_.indexOf(this.selectValue, String(val)) > 0) {
            console.log(val)
          }
          return _.indexOf(this.selectValue, String(val)) >= 0 ? 'ivu-select-item-selected' : ''
        } else {
          return String(this.selectValue) === String(val) ? 'ivu-select-item-selected' : ''
        }
      },
      remoteMethod (txt) {
        this.searchLoading = true
        if (txt) {
          setTimeout(() => {
            let upTxt = txt.toUpperCase()
            let lowTxt = txt.toLowerCase()
            let fields = this.searchKeys.split(',')
            let resSource = _.filter(this.dataClone, function (sourceItem) {
              return _.some(fields, (fieldItem) => {
                return (_.includes(sourceItem[fieldItem], upTxt) || _.includes(sourceItem[fieldItem], lowTxt))
              })
            })
            this.optionData = resSource.slice(0, 200)
            this.searchLoading = false
          }, 200)
        } else {
          setTimeout(() => {
            if (this.dropAll) {
              this.optionData = this.dataClone.slice(0, 200)
            } else {
              this.optionData = []
            }
            this.searchLoading = false
          }, 200)
        }
      },
      clearAction () {
      },
      mountedAction () {
        this.dataClone = _.cloneDeep(this.dataList)
        this.remoteMethod()
      }
    },
    created () {
    },
    mounted () {
      this.mountedAction()
      this.$watch(() => {
        return this.query
      }, (newVal, oldVal) => {
        this.remoteMethod(newVal)
      })
      this.$watch(() => {
        return this.$refs.selectAuto.dropVisible
      }, (newVal, oldVal) => {
        this.dropVisible = true
        if (newVal) {
          this.query = ''
          this.$refs['searchInput'].focus()
        }
      })
      if (this.multiple) {
        this.$watch(() => {
          return this.selectValue.length
        }, (newVal, oldVal) => {
          this.query = ''
          this.remoteMethod('')
        })
      }
    },
    components: {}
  }
</script>

<style scoped>
  #xlinkAutoModal .ivu-select-not-found {
    display: none;
  }
</style>
